<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<script src="js/jquery-3.0.0.js"></script>
		<script src="js/jquery-3.0.0.min.js"></script>
		<title>实验室设备管理系统</title>

		<meta name="description" content="User login page" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<link rel="shortcut icon" href="plugins/images/favicon.ico" type="image/x-icon" />
		
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="plugins/ace/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="plugins/ace/assets/css/font-awesome.css" />

		<!-- text fonts -->
		<link rel="stylesheet" href="plugins/ace/assets/css/ace-fonts.css" />

		<!-- ace styles -->
		<link rel="stylesheet" href="plugins/ace/assets/css/ace.css" />

		<link rel="stylesheet" href="plugins/ace/assets/css/ace-rtl.css" />
		
		<script src="js/jquery-3.0.0.js"></script>
		<script src="js/jquery-3.0.0.min.js"></script>
		
		<link rel="stylesheet" href="plugins/layer/skin/layer.css">
		<link rel="stylesheet" href="plugins/layer/skin/layer.ext.css">
		<script src="plugins/layer/layer.js"></script>
	
	</head>

	<body class="login-layout blur-login ">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
							<h4 class="blue" id="id-company-text">&nbsp;</h4>
								<h1>
									<!-- <i class="ace-icon fa fa-leaf green"></i> -->
									<span style="float: left"><img alt="LOGO" style="height: 43px;" src="plugins/images/minlogo.png"></span>
									<span class="red">实验室设备管理系统</span>
									<!-- <span class="white" id="id-text2">实验室设备管理系统</span> -->
								</h1>
								<h4 class="blue" id="id-company-text">&nbsp;</h4>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
								<!-- 显示方式 -->
								<div style="float: right;height: 47px;width: 47px;top: 0px;cursor: pointer;">
									<a id="quickLogin"><img alt="快速登录" src="plugins/images/QuickLogin-47-47.png"></a>
									<a id="pwdLogin" hidden="hidden"><img alt="账号密码登录"src="plugins/images/PwdLogin-48-48.png"></a>
								</div>
								
								<div class="widget-body">
										<!-- 账号密码登录 -->
										<div class="widget-main" id="pwd_Login">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												请输入你的账户信息
											</h4>
											<div class="space-6"></div>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="email" type="text" class="form-control" placeholder="邮箱" />
															<i class="ace-icon fa fa-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="password" type="password" class="form-control" placeholder="密码"  />
															<i class="ace-icon fa fa-lock"></i>
														</span>
													</label>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="emailCode" type="text" style="width: 68%;float: left;" class="form-control" placeholder="邮箱验证码" />
															<!-- <i class="ace-icon fa fa-envelope"></i>  -->
															<button id="sendValid" type="button" send="1"  style="width: 32%" class="width-18 pull-right btn btn-sm btn-primary">
															<span class="bigger-110">发送验证码</span>
														</button>
														</span>
													</label> 

													<div class="space"></div>

													<div class="clearfix">
														
														<button id="login_btn" type="button" class="width-35 pull-right btn btn-sm btn-primary">
															<i class="ace-icon fa fa-key"></i>
															<span class="bigger-110">登录</span>
														</button>
													</div>
													<div class="space-4"></div>
												</fieldset>
											</form>
										</div><!-- /.widget-main -->
										<!-- 二维码登录 -->
										<div class="widget-main" id="quick_Login" hidden="hidden" style="height: 298px;">
											<h4 class="header blue lighter bigger">
												<i class="ace-icon fa fa-coffee green"></i>
												扫码登录更安全
											</h4>
											<div class="space-6"></div>
											<form style="text-align: center;">
												<fieldset>
													<img id="QRcodeImg" style="height: 65%;width: 65%;"  src="http://qr.liantu.com/api.php?text=${webUrl}"/><!-- 默认为登录地址 -->
												</fieldset>
											</form>
											
										</div>
										
										<div class="toolbar clearfix">
											<div>
												<a href="#" data-target="#forgot-box" class="forgot-password-link">
													<i class="ace-icon fa fa-arrow-left"></i>
													忘记密码
												</a>
											</div>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.login-box -->

								<div id="forgot-box" class="forgot-box widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h4 class="header red lighter bigger">
												<i class="ace-icon fa fa-key"></i>
												忘记密码
											</h4>

											<div class="space-6"></div>
											<p>
												填写您的邮箱，发送成功后查看您收到的邮件。
											</p>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="f_email" type="email" class="form-control" placeholder="请输入您的邮箱" />
															<i class="ace-icon fa fa-envelope"></i>
														</span>
													</label>

													<div class="clearfix">
														<button onclick="forgotPwd();" type="button" class="width-35 pull-right btn btn-sm btn-danger">
															<i class="ace-icon fa fa-lightbulb-o"></i>
															<span class="bigger-110">发送邮件</span>
														</button>
													</div>
												</fieldset>
											</form>
										</div><!-- /.widget-main -->

										<div class="toolbar center">
											<a href="#" data-target="#login-box" class="back-to-login-link">
												登陆
												<i class="ace-icon fa fa-arrow-right"></i>
											</a>
										</div>
									</div><!-- /.widget-body -->
								</div><!-- /.forgot-box -->
								
							</div><!-- /.position-relative -->

							<div class="navbar-fixed-top align-right">
								<br />
								&nbsp;
								<a id="btn-login-dark" href="#">黑色</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-blur" href="#">蓝色</a>
								&nbsp;
								<span class="blue">/</span>
								&nbsp;
								<a id="btn-login-light" href="#">浅色</a>
								&nbsp; &nbsp; &nbsp;
							</div>
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div><!-- /.main-content -->
		</div><!-- /.main-container -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='plugins/ace/assets/js/jquery.js'>"+"<"+"/script>");
		</script>

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='plugins/ace/assets/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>

		<!-- inline scripts related to this page -->
		<script type="text/javascript">
			jQuery(function($) {
			 $(document).on('click', '.toolbar a[data-target]', function(e) {
				e.preventDefault();
				var target = $(this).data('target');
				$('.widget-box.visible').removeClass('visible');//hide others
				$(target).addClass('visible');//show target
			 });
			});
			
			
			//you don't need this, just used for changing background
			jQuery(function($) {
			 $('#btn-login-dark').on('click', function(e) {
				$('body').attr('class', 'login-layout');
				$('#id-text2').attr('class', 'white');
				$('#id-company-text').attr('class', 'blue');
				
				e.preventDefault();
			 });
			 $('#btn-login-light').on('click', function(e) {
				$('body').attr('class', 'login-layout light-login');
				$('#id-text2').attr('class', 'grey');
				$('#id-company-text').attr('class', 'blue');
				
				e.preventDefault();
			 });
			 $('#btn-login-blur').on('click', function(e) {
				$('body').attr('class', 'login-layout blur-login');
				$('#id-text2').attr('class', 'white');
				$('#id-company-text').attr('class', 'light-blue');
				
				e.preventDefault();
			 });
			 
			});
		</script>
		<!-- 忘记密码 -->
		<script type="text/javascript">
			/**
			 * 忘记密码，发送邮件链接修改密码
			 */
			function forgotPwd(){
				var email = $("#f_email").val();  // 获取用户输入的邮箱
				// 邮箱验证
				$.post("forgotPwd",{"email":email},function(resp){
					if(resp=="error"){
						layer.msg("系统没有检索到您的邮箱账号");
					}else{
						layer.msg("邮件已发送，注意查收！");
					}
					
				});
			}
		</script>
		<script type="text/javascript">
			/**
			 * 发送验证码
			 */
			var timer = 60;
			var timershow;
			$("#sendValid").click(function(){ // 点击验证码触发事件
				
				 // 判断用户是否已经点击发送验证码
				 if($(this).attr("send")==0){ 
					return; 
				 };
				 
				 // 验证信息是否输入
				 var email = $.trim($("#email").val());
				 var pwd = $.trim($("#password").val());
				 if(!email){
					 layer.msg("请填写邮箱");
					 return;
				 }else if(!pwd){
					 layer.msg("请填写密码");
					 return;
				 }
				 
				 // 设置按钮被点击
				 $("#sendValid").attr("send","0");
				 $("#sendValid").addClass("disabled");
				 function timeCount(){ 
					 if(timer>=1){
						 $("#sendValid").text(timer+"s");
						 timer -= 1;
						 timershow = setTimeout(function(){timeCount()},1000);
					 }else{
						 timer = 60;
						 $("#sendValid").attr("send","1");
						 $("#sendValid").removeClass("disabled");
						 $("#sendValid").text("发送验证码");
					 }
				 }
				 timeCount(); // 开始倒计时
				 
				 // 提交信息发送验证码
				 $.post("sendEmailCode",{"email":email,"pwd":pwd},function(resp){ 
					 if(resp=="success"){ // 邮件成功发送
						 layer.msg("邮件已发送，请到邮件中查看验证码");
					 }else{
						 clearTimeout(timershow);
						 timer = 60;
						 $("#sendValid").attr("send","1");
						 $("#sendValid").removeClass("disabled");
						 $("#sendValid").text("发送验证码");
						 layer.msg("邮箱或密码错误");
					 }
				 })
			})
		</script>
		<!-- 用户登录 -->
		<script type="text/javascript">
		$(document).ready(function(){
			// 回车登录事件
			$("body").keydown(function() {
	           if (event.keyCode == "13") { //keyCode=13是回车键
	              $("#login_btn").click();
	           } 
	        });
			
			// 登录
			$("#login_btn").click(function(){   // 点击确定按钮提交信息
				 // 验证信息是否输入
				 var email = $.trim($("#email").val());
				 var pwd = $.trim($("#password").val());
				 var code = $.trim($("#emailCode").val());
				 if(!email){
					 layer.msg("请填写邮箱");
					 return;
				 }else if(!pwd){
					 layer.msg("请填写密码");
					 return;
				 }else if(!code){
					 layer.msg("请填写验证码");
					 return;
				 }
				 
				 // 提交信息发送验证码
				 $.post("login",{"email":email,"pwd":pwd,"code":code},function(resp){ 
					 if(resp=="success"){ // 验证成功
						window.location.href="loginIndex"; 
					 }else if(resp=="codeError"){ // 验证码错误
						 layer.msg("验证码错误");
					 }else if(resp=="codeOutTime"){ // 验证码超时
						 clearTimeout(timershow);
						 timer = 60;
						 $("#sendValid").attr("send","1");
						 $("#sendValid").removeClass("disabled");
						 $("#sendValid").text("发送验证码");
						 layer.msg("验证码超时，请重新发送");
					 }else{ // 账号密码错误
						 clearTimeout(timershow);
						 timer = 60;
						 $("#sendValid").attr("send","1");
						 $("#sendValid").removeClass("disabled");
						 $("#sendValid").text("发送验证码");
						 layer.msg("邮箱或密码错误");
					 }
				 })
				 
			});
			
		}); 
	
</script>
<!-- 切换登录方式 -->
<script type="text/javascript">
/**
 * 二维码登录
 */
$("#quickLogin").click(function(){
	$("#quickLogin").hide();
	$("#pwdLogin").show();
	$("#pwd_Login").hide();
	$("#quick_Login").show();
});

/**
 * 账号密码登录
 */
 $("#pwdLogin").click(function(){
		$("#quickLogin").show();
		$("#pwdLogin").hide();
		$("#pwd_Login").show();
		$("#quick_Login").hide();
	});
</script>
<!-- 扫码登录 -->
<input id="webUrl" type="text" hidden="hidden" value="${webUrl}"><!-- 存储项目地址 -->
<script type="text/javascript" src="http://cdn.goeasy.io/goeasy.js"></script> <!-- 引入GoEasy -->
<script type="text/javascript">

startQuickLogin(); // 进入页面启动扫码

function startQuickLogin(){ // 启动扫码登录
	
	$.post("getGoEasyInfo",{},function(resp){ // 请求服务器获得channel、appKey
		
		// 填充二维码信息
		var path = "http://qr.liantu.com/api.php?text="+ $("#webUrl").val() + "?c=" +resp.channel; // 将登录地址+channel放到二维码中
		$("#QRcodeImg").attr("src",path);
		
		// 连接goEasy服务器
		var goEasy = new GoEasy({
			appkey:resp.appKey,  // goeasy key
			// 事件监听器
			onConnected:function(){
				console.log("成功连接GoEasy");
			},
			onDisconnected:function(){
				console.log("与GoEasy连接断开");
			},
			onConnectFailed:function(error){
				console.log("与GoEasy连接失败，错误编码："+error.code+"错误信息："+error.content);
			}
		});

		// 在web浏览器端接收goEasy服务器推送的消息
		goEasy.subscribe({
		    channel: resp.channel, // 相当于一个通信管道，全局唯一
		    onMessage: function(message){
		    	
		    	var data = message.content.split("-"); // 将获得信息分割（邮箱，密码，验证码）
		    	quickLogin(data[0],data[1]); // 调用登录函数
		    },
		    onSuccess:function(){
		    	setTimeout(function(){unSubscribe()},300000); // 销毁之前的channel,生成新的channel，每5分钟更新一次
		    	
		    	console.log("channel订阅成功。");
		    },
		    onFailed:function(error){
		    	console.log("channel订阅失败，错误编码："+error.code+"错误信息："+error.content);
		    }
		});
		
		/**
		 * 验证码登录
		 */
		function quickLogin(email,pwd){ // 密码是加密过的密码
			 // 提交信息发送验证码
			 $.post("quickLogin",{"email":email,"pwd":pwd},function(resp){ 
				 if(resp=="success"){ // 验证成功
					 unSubscribeEnd(); // 销毁登陆成功的channel
				 
					 window.location.href="loginIndex"; // 跳转页面，进入系统
				 }else{ // 账号密码错误
					 layer.msg("邮箱或密码错误");
				 }
			 })
		}
		
		// 取消订阅channel，减少无用的channel并发量，生成新的
		function unSubscribe(){
			goEasy.unsubscribe({ // 销毁旧的channel
				channel: resp.channel,
				onSuccess:function(){
					console.log("订阅取消成功");
				},
				onFailed:function(error){
					console.log("取消订阅失败，错误编码："+error.code+"错误信息："+error.content);
				}
			});
			
			startQuickLogin(); // 定时刷新二维码，生成新的channel
		}
		
		// 取消订阅已经登录成功的channel
		function unSubscribeEnd(){
			goEasy.unsubscribe({ // 销毁旧的channel
				channel: resp.channel,
				onSuccess:function(){
					console.log("订阅取消成功");
				},
				onFailed:function(error){
					console.log("取消订阅失败，错误编码："+error.code+"错误信息："+error.content);
				}
			});
		}
	});
	
}
	
</script>
	</body>
</html>
		